<style lang="less" rel="stylesheet/less" type="text/less">
</style>
<template>
  <div>
    <div>
      ApiKey名称:
      <span style="padding-left:20px;">{{permission_detail.name}}</span>
    </div>
    <div>
      计费类型:
      <span style="padding-left:20px;" v-if="permission_detail.type===0">测试</span>
      <span style="padding-left:20px;" v-else-if="permission_detail.type===1">按次计费</span>
      <span style="padding-left:20px;" v-else-if="permission_detail.type===2">按时间计费</span>
      <span style="padding-left:20px;" v-else-if="permission_detail.type===3">永久授权</span>
    </div>
    <div>
      ApiKey有效期：
      <span
        style="padding-left:20px;"
        v-if="permission_detail.type===2"
      >{{ real_start}}---{{real_end}}</span>
      <span style="padding-left:20px;" v-else>永久</span>
    </div>
    <div style="padding-top:2px;padding-bottom:14px">ApiKey访问权限：</div>
    <Table :columns="titleName" :data="data"></Table>
  </div>
</template>
<script>
export default {
  props: {
    permission_detail: {
      type: Object,
      default() {
        return {};
      }
    },
    data: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      real_start: null,
      real_end: null,
      titleName: [
        {
          title: "group",
          key: "group",
          width: "90px"
        },
        {
          title: "endpoint",
          key: "name",
          width: "150px"
        },
        {
          title: "api名称",
          key: "title",
          width: "140px"
        },
        {
          title: "计费类型",
          render: (h, { row }) => {
            let type;
            if (row.price === "免费") {
              type = <div>{row.price}</div>;
            } else {
              type = <div>{row.price}元/次</div>;
            }
            return type;
          }
        },
        {
          title: "操作",
          render: (h, { row }) => {
            let operating = (
              <div
                onClick={() => {
                  this.toAPIBOOKDetail(row.name);
                }}
                style="color:deepskyblue;cursor:pointer"
              >
                api文档
              </div>
            );
            return operating;
          }
        }
      ]
    };
  },
  created() {
    this.init();
  },
  methods: {
    toAPIBOOKDetail(name) {
      this.$emit("toAPIBOOKDetail", name);
    },
    init() {
      this.$moment.locale(navigator.language);
      this.real_start = this.$moment
        .utc(`${this.permission_detail.start_time}`)
        .local()
        .format("lll");
      this.real_end = this.$moment
        .utc(`${this.permission_detail.end_time}`)
        .local()
        .format("lll");
    }
  }
};
</script>